<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<form action="http://www.baidu.com">
				<div>
					<span>用户名：</span>
					<span>
						<input name="username" v-model="username" type="text"/>
					</span>
				</div>
				<div>
					<span>性别：</span>
					<span>
						<input name="gender" type="radio" value="男" id="man" v-model="gender"/>
						<label for="man">男</label>
						<input name="gender" type="radio" value="女" id="women" v-model="gender"/>
						<label for="women">女</label>
					</span>
				</div>
				<div>
					<span>爱好：</span>
					<span>
						<input name="hobbys" type="checkbox" value="爬山" v-model="hobbys"/>爬山
						<input name="hobbys" type="checkbox" value="带你爬山" v-model="hobbys"/>带你爬山
						<input name="hobbys" type="checkbox" value="和你媳妇爬山" v-model="hobbys"/>带你媳妇爬山
					</span>
				</div>
				<div>
					<span>部门：</span>
					<span>
						<select name="dept" v-model="dept" multiple="true">
							<option value="研发部">研发部</option>
							<option value="测试部">测试部</option>
							<option value="财务部">财务部</option>
						</select>
					</span>
				</div>
				<div>
					<span>用户详情</span>
					<span>
						<textarea name="area" v-model="area"></textarea>
					</span>
				</div>
				<div>
					<!-- 默认的行为失效 -->
					<button @click.prevent="submit()">提交</button>
				</div>
			</form>
		</div>
		
	</body>
	<script>
		const app = new Vue({
			el:"#app",
			data:{
				username:'',
				gender:'男',
				hobbys:['爬山','和你媳妇爬山'],
				dept:['研发部','财务部'],
				area:''
			},
			methods:{
				submit(){
					console.log("提交数据"+this.username)
				}
			}
		})
	</script>
</html>
